<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/swiper-bundle.min.css">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/footer.css">
  <link rel="stylesheet" href="../css/myCssReset.css">
  <link rel="stylesheet" href="../css/story.css">
  <title>有间名宿网——特色旅游住宿，各类民宿房！</title>
</head>

<body>
  <!-- 固定页头 -->
  <header>
    <div class="headbox">
      <div>
        <div class="shou">
          <ul>
            <li><a href="http://127.0.0.1:9000/index.html" current>首页</a></li>
            <li><a href="http://127.0.0.1:9000/html/search.html">房间</a></li>
            <li><a href="http://127.0.0.1:9000/html/story.html">故事</a></li>
          </ul>
        </div>
      </div>
      <div class="log">
        <a href="http://127.0.0.1:9000/html/login.html">登录</a>
        <a href="http://127.0.0.1:9000/html/register.html">注册</a>
      </div>
      <div class="user">
        <a href="./html/order.html"></a>
        <span></span>
      </div>
    </div>
  </header>
  <!-- 轮播图 -->
  <section class="lunbo">
    <div>
      <ul class="card">
         <!-- 动态添加li里面的内容 -->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="page">
        <ul>
          <li><span>1</span></li>
          <li><span>2</span></li>
          <li><span>3</span></li>
          <li><span>4</span></li>
          <li><span>5</span></li>
        </ul>
      </div>
    </div>
  </section>
  <!-- 页脚 -->
  <footer>
    <div class="box">
      <div class="row1">
        <ul>
          <li>
            <a href="javscrip:void">免责声明</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">平台协议与规则</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">交易规则</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">关于我们</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">联系我们</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">法律声明</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">新手指南</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">帮助中心</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">新闻资讯</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">媒体报道</a>
          </li>
        </ul>
      </div>
      <div class="row2">
        <p>
          客服电话:400-056-0055或010-89180879
          客户服务:service@yms.com
          意见反馈:feedback@yms.com
        </p>
      </div>
      <div class="row3">
        <span>网站备案/许可证号: </span>
        <a href="javscrip:void">京ICP备12043553号-3 </a>
        <a href="javscrip:void">京公网安备11010502037765 </a>
        <a href="javscrip:void">营业执照编号104555056 </a>
        <span>北京爱游易科技有限公司</span>
      </div>
    </div>
  </footer>
  <!-- js文件 -->
  <script src="../js/header.js"></script>
  <script src="../js/swiper-bundle.min.js"></script>
  <script>
    // 有BUG li卡片应该是动态获取后动态添加，后面找时间修改
    //获取ul
    let liList = document.querySelectorAll("section div ul li")
    let pageList = document.querySelectorAll("section .page ul li span")
    //promise封装ajax请求
    let getIndex = function (url) {
      return new Promise(
        function (resolve, reject) {
          let xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 300) {
                let result = JSON.parse(xhr.responseText);
                // console.log(result);
                resolve(result);
              } else {
                reject(new Error("Request was unsuccessful: ") + xhr.status);
              }
            }
          }
          xhr.open("GET", url, true);
          xhr.send();
        }
      );
    }
    //渲染数据函数封装
    function render(num) {
      //拿到地区名后渲染到提示框
      getIndex(`/admin/story/${num}`).then((result) => {
        //console.log(result)
        //循环拼接str 再赋值给li 
        for(let i=0;i<result.data.length;i++){ 
          let j = i
          let str = ""
          str += `
          <img src="../img/${result.data[i].s_pic}">
          <h3>${result.data[i].s_tit}</h3>
          <p>${result.data[i].s_text}</p>
          `
          liList[i].innerHTML = str
          liList[i].onclick = function(j){
            window.location.href = `./storylist.html?s_id=${result.data[i].s_id}`
          }
        }
      });
    }
    //页面加载时默认渲染第一页
    document.body.onload = render(1);
    //后面点击哪一页渲哪一页
    pageList.forEach(function(item,index){
      item.onclick = function(){
        //数据库请求数据后渲染,先清空后渲染
        render(item.innerHTML)
        //所有小图标默认样式
        pageList.forEach((item)=>{
          item.style.color = "#999";
          item.style.backgroundColor = "rgb(221, 221, 221)";
        })
        //渲染被点击的分页器
        item.style.color = "rgb(255, 255, 255)";
        item.style.backgroundColor = "rgb(255, 51, 0)";
      }
    })
  </script>
</body>

</html>